<template>
    <div>
F
    <el-upload
  action="http://localhost:9999/upload?flag=4"
  list-type="picture-card"
  :auto-upload="true"
   :on-success="uploadSuccess"
   :file-list="fileList">
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
      <img
        :src="file.url"
      >
    <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
</el-upload>
<el-button type="info" @click="submit">提交</el-button>
<el-dialog v-model:visible="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
    </div>
</template>
<script>
export default {
data(){
return{
     dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        imgArray:[],
        fileList:[]


}
},
created(){
    this.getStills(this.$route.query.id)
},
methods:{
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },
      uploadSuccess(res,file,fileList){
          console.log(res)
          console.log(fileList)
          this.imgArray = []
          fileList.forEach(element => {
              if(element.response == undefined){
                  this.imgArray.push(element.url)
              }else{
                   this.imgArray.push(element.response.data.url)  
              }
           
          });
      },
       async submit(){
           let stills = this.imgArray.join(",")
           const {data:res} = await this.$http.post('filminfo/updateStills',{filmId:this.$route.query.id,stills:stills})
           if(res.code != 200){
            return this.$message.error(res.message)
           }
           else{
               alert("success")
           }
       },
       async getStills(id){
           const {data:res} = await this.$http.get('filminfo/getStillsById',{params:{id:id}})
           if(res.code != 200){
            return this.$message.error(res.message)
           }
           else{
           let stills =   res.data.stills.split(",")
           let array = []
           stills.forEach(element => {
               if(element != null && element != ''){
                   array.push({url:element})
               }
               
           });
           this.fileList = array
           }
       }
}
}
</script>
<style lang="less" scoped>
</style>